<template>
  <el-dialog title="赋予权限" :visible.sync="visible"
             @close="$emit('update:show', false)">
    <div style="height: 250px;overflow: auto;">
      <el-tree ref="permTree"
               :props="permTreeDataProps"
               node-key="id"
               :data = "permsData"
               show-checkbox
               :default-expand-all="true"
               :check-strictly="true"
               :default-checked-keys="bindedPermids"
               @check-change="checkBindPerms">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>&nbsp;<span class="text-danger">{{ data.available===0?'[禁用]':'' }}</span>
        </span>
      </el-tree>
    </div>
    <div slot="footer" class="dialog-footer">
      <div style="float: left;">
        <el-button type="text" @click="checkAll()">全选</el-button>
        <el-button type="text" @click="checkAll(false)">取消全选</el-button>
      </div>
      <div style="float: right;">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="saveBindPerm">保 存</el-button>
      </div>
      <div style="clear: both;"></div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: "BindPermDialog",
    props: ['show', 'roleData'],
    watch: {
      show() {
        this.visible = this.show
      }
    },
    data() {
      return {
        visible: this.show,
        loading: false,
        permTreeDataProps: {
          label: 'text',
          children: 'children'
        },
        permsData: [],
        bindedPermids: [],
        allIds: []
      }
    },
    mounted: function() {
      this.api.post('/system/resources/all', {})
        .then((data) => {
          this.parseDatas(data.data);

          this.bindedPermids = [];
          let ps = this.roleData.resourcesId;
          if(ps){
            for(let i=0; i<ps.length; i++){
              this.bindedPermids.push(ps[i]);
            }
          }

          this.permsData = data.data;
        });
    },
    methods: {
      checkBindPerms: function(data, checked, indeterminate){
        this.bindedPermids = (this.$refs.permTree.getCheckedKeys());
      },
      saveBindPerm: function(){
        this.roleData.resourcesId = this.bindedPermids;
        this.loading = true;
        this.api.post('/system/role/update', this.roleData)
          .then((data) => {
            this.loading = false;
            if(data.code===200){
              this.visible = false;
              this.$message({
                message: '赋予权限成功',
                type: 'success'
              });
              this.$parent.query();
            }else{
              this.$message.error(data.data);
            }
          }).catch((error) => {
            this.loading = false;
          });
      },
      parseDatas: function(list){
        for(let i=0; i<list.length; i++){
          this.allIds.push(list[i].id);
          this.parseDatas(list[i].children);
        }
      },
      checkAll: function(uncheck){
        if(uncheck===false)
          this.$refs.permTree.setCheckedKeys([]);
        else
          this.$refs.permTree.setCheckedKeys(this.allIds);
      }
    }
  }
</script>
